import Imagelocation from '@/components/Imagelocation';
import { toValidScalePX } from '@/utils/index';
import { View } from '@tarojs/components';
import React from 'react';
import ImgCover from '../ImgCover';
import styles from './index.module.scss';

/**
 *
 * @param {object} o
 * @param {string} o.url 图片url, 自动处理前缀
 * @param {string} o.className 组件的className, width/height/font-size 会继承到 ImgCover
 * @param {number|string} o.size 图片大小 数字自动转换为真实大小, 带单位的string类型不会转换, 一定是正方形, 覆盖className
 * @param {number|string} o.fontSize 售罄等内容的字体大小,数字自动转换为真实大小, 带单位的string类型不会转换, 覆盖className
 * @param {boolean} o.isSoldOut 是否售罄显示
 * @param {string} o.soldOutTxt 默认为   售罄
 * @param {function} o.onClick 组件点击后触发回调
 * @returns
 */
const ProductImg = ({
  size,
  fontSize,
  url,
  className = '',
  isSoldOut = false,
  soldOutTxt,
  onClick = () => {},
}) => {
  // 图片正方形 高宽
  const v = toValidScalePX(size);
  const style = {
    width: v,
    height: v,
  };

  return (
    <View className={`${styles.ProductImg} ${className}`} style={style} onClick={onClick}>
      <Imagelocation className="product-img" src={url} type="product" />

      {isSoldOut && <ImgCover fontSize={fontSize} txt={soldOutTxt} />}
    </View>
  );
};

export { ProductImg };
